<template>
  <section class="hero">
    <header>
      <div class="wrapper">
        <a href="#"><img src="/static/img/logo.png" class="logo" alt="" title=""/></a>
        <a href="#" class="hamburger" @click="clickHamburger"></a>
        <nav>
          <ul>
            <li><a href="#">Buy</a></li>
            <li><a href="#">Rent</a></li>
            <li><a href="#">Sell</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <a href="/login" class="login_btn">Login</a>
        </nav>
      </div>
    </header><!--  end header section  -->
    <section class="caption">
      <h2 class="caption">Find You Dream Home</h2>
      <h3 class="properties">Appartements - Houses - Mansions</h3>
    </section>
  </section><!--  end hero section  -->
</template>

<script>
  import $ from 'jquery';
  export default {
    methods: {
     clickHamburger(e) {
        e.preventDefault();
        $('.hamburger').toggleClass('opned');
        $('header nav').toggleClass('active');
      }
    },
  }
</script>

<style scoped>

</style>